<template>
  <n-h6>好友</n-h6>
  <n-flex vertical>
    <n-button
      v-for="item in groupBtnList"
      :key="item.group"
      quaternary
      round
      @click="router.push({ name: 'group', params: { group: item.group } })">
      <template #icon>
        <v-icon :icon="'mdi-' + item.icon" size="22" />
      </template>
      {{ item.name }}
      <span class="people-num">{{ item.number }}</span>
    </n-button>
  </n-flex>
</template>
<script setup lang="ts">
import router from "@/router";
defineProps(["groupBtnList"]);
</script>

<style scoped>
.n-button {
  justify-content: flex-start;
}

.people-num {
  position: absolute;
  right: 20px;
}
</style>
